<script setup lang="ts">
import type { Knowledge } from '@/types/consult';
import {useFollow} from '@/composable'

defineProps<{
    article: Knowledge
}>()

const {loading,follow} = useFollow('knowledge')


</script>

<template>
    <div class="knowledge-card van-hairline--bottom">
        <div class="head">
            <van-image round class="avatar" :src="article.creatorAvatar"></van-image>
            <div class="info">
                <p class="name">{{ article.creatorName + article.topic }}</p>
                <p class="dep van-ellipsis">
                    {{ article.creatorHospatalName }}
                    {{ article.creatorDep }}
                    {{article.creatorTitles }}
                </p>
            </div>
            <cp-like-btn 
            :loading="loading" 
            :flag="article.likeFlag"
            @click="follow(article)" 
            />
        </div>
        <div class="body">
            <h3 class="title van-ellipsis">{{ article.title }}</h3>
            <p class="tag">
                <span># {{ article.topic }}</span>
            </p>
            <p class="intro van-multi-ellipsis--l2" v-html="article.content"/>
            <div class="imgs">
                <van-image v-for="(img,index) in article.coverUrl" :key="index" :src="img" />
            </div>
            <p class="logs">
                <span>{{ article.collectionNumber }} 收藏</span>
                <span>{{ article.commentNumber }} 评论</span>
            </p>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.knowledge-card {
    padding: 20px 0 16px;
    :deep() img{
        object-fit: cover;
        max-width: 100%;
    }
    .head {
        display: flex;
        align-items: center;

        .avatar {
            width: 38px;
            height: 38px;
            margin-right: 10px;
        }

        .info {
            width: 200px;
            padding-right: 10px;

            .name {
                color: var(--cp-text2);
            }

            .dep {
                color: var(--cp-tip);
                font-size: 12px;
            }
        }

    }

    .body {
        .title {
            font-size: 16px;
            margin-top: 8px;
            font-weight: normal;
        }

        .tag {
            margin-top: 6px;

            >span {
                color: var(--cp-primary);
                margin-right: 20px;
                font-size: 12px;
            }
        }

        .intro {
            margin-top: 7px;
            line-height: 2;
            color: var(--cp-text3);
        }

        .imgs {
            margin-top: 7px;
            display: flex;

            .van-image {
                width: 106px;
                height: 106px;
                margin-right: 12px;
                border-radius: 12px;
                overflow: hidden;

                &:last-child {
                    margin-right: 0;
                }
            }

            &.large {
                .van-image {
                    width: 185px;
                    height: 125px;
                }
            }
        }

        .logs {
            margin-top: 10px;

            >span {
                color: var(--cp-tip);
                margin-right: 16px;
                font-size: 12px;
            }
        }
    }
}
</style>
